<template>
  <div id="user">
    <el-card class="box-card">
      <el-form
        size="mini"
        :inline="true"
        :model="serachForm"
        class="demo-form-inline"
      >
        <el-form-item label="关键字">
          <el-input
            clearable
            v-model="serachForm.keyword"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item label="点赞数">
          <el-col :span="11">
            <el-input
              clearable
              style="width: 80px"
              v-model.number="serachForm.minLike"
            ></el-input
          ></el-col>
          <el-col :span="2">-</el-col>
          <el-col :span="11">
            <el-input
              clearable
              style="width: 80px"
              v-model.number="serachForm.maxLike"
            ></el-input
          ></el-col>
        </el-form-item>
        <el-form-item label="时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="serachForm.beginDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="serachForm.endDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-lollipop"
            @click="handleSubmit"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="handleSave"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            style="width: 100%"
            @cell-mouse-enter="ncrFormat"
            @cell-mouse-leave="showClickIcon = false"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column fixed width="180" prop="content" label="弹幕内容">
              <template slot-scope="scope">
                <el-button
                  v-if="showClickIcon == true && scope.row.id == rowid"
                  @click.stop="showReportInfo(scope.row)"
                  size="mini"
                  type="warning"
                  icon="el-icon-warning-outline"
                  >举报弹幕</el-button
                >
                <div v-else>
                  {{ scope.row.content | sensitiveMsgFilter(sensitiveMsgData) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="authorId" label="发布人ID" />
            <el-table-column prop="videoId" label="视频ID" />
            <el-table-column prop="videoTime" label="视频时间" />
            <el-table-column
              prop="likes"
              style="margin: 5px"
              align="center"
              label="点赞数"
            >
              <template v-slot="scope">
                <el-badge :value="scope.row.likes" class="badge"
                  >点赞数
                </el-badge>
              </template>
            </el-table-column>
            <el-table-column prop="color" align="center" label="弹幕颜色" />
            <el-table-column prop="fontSize" label="字体大小" />
            <el-table-column prop="status" label="状态">
              <template v-slot="scope">
                <el-tag
                  effect="plain"
                  disable-transitions
                  :type="scope.row.status == 0 ? 'success' : 'warning'"
                >
                  {{ scope.row.status == 0 ? "正常" : "禁用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="releaseTime" label="发布时间" width="180" />
            <el-table-column fixed="right" width="180" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="serachForm.currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="serachForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="40%"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        status-icon
        ref="editForm"
        label-width="80px"
      >
        <el-form-item label="弹幕内容" prop="content">
          <el-input v-model="editForm.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="发布人ID" prop="authorId">
          <el-input v-model.number="editForm.authorId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="视频ID" prop="videoId">
          <el-input v-model.number="editForm.videoId" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="视频时间" prop="videoTime">
          <el-time-picker
            placeholder="选择时间"
            v-model="editForm.videoTime"
            style="width: 100%"
          ></el-time-picker>
        </el-form-item> -->
        <el-form-item label="点赞数" prop="likes">
          <el-button
            type="warning"
            plain
            @click="editForm.likes++"
            style="padding: 5px; border-radius: 15px"
            ><i class="el-icon-thumb" style="font-size: 30px"></i
            >{{ editForm.likes }}</el-button
          >
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="0"
            :inactive-value="1"
            v-model="editForm.status"
          />
        </el-form-item>
        <el-form-item label="字体大小" prop="fontSize">
          <el-input v-model="editForm.fontSize" autocomplete="off" />
        </el-form-item>
        <el-form-item label="弹幕颜色" prop="color">
          <el-input v-model="editForm.color" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="发布时间" prop="releaseTime">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="editForm.releaseTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 举报表单 -->
    <el-dialog title="举报信息" :visible.sync="showInfo" width="40%" center>
      <el-row>
        <!-- style="white-space: pre-line" -->
        <el-col :span="10">{{ reportTitle }}</el-col>
        <el-col :span="10" style="height: 40px"><div></div></el-col>
        <el-col :span="4"
          ><el-button size="mini" type="info" plain icon="el-icon-share"
            >举报说明</el-button
          ></el-col
        >
      </el-row>
      <el-row>
        <el-divider></el-divider>
      </el-row>
      <el-row
        ><el-checkbox-group v-model="checkedReportTags" :max="3">
          <el-checkbox
            border
            style="margin-top: 20px"
            v-for="report in reportTags"
            :label="report"
            :key="report"
            >{{ report }}</el-checkbox
          >
        </el-checkbox-group>
      </el-row>
      <el-row>
        <el-col>
          <el-input
            style="margin-top: 20px"
            type="textarea"
            :rows="2"
            @blur="checkRepoertMsgLength"
            placeholder="如果发现其他行为。或对举报内容有补充描述，请输入（最多30字）"
            v-model="reportMsg"
            clearable
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          ><el-button type="primary" @click="showInfo = false"
            >算了</el-button
          ></el-col
        >
        <el-col :span="12"
          ><el-button
            type="warning"
            style="background-color: rgb(174, 135, 71); opacity: 0.9"
            @click="handleReport()"
            >快速举报</el-button
          ></el-col
        >
      </el-row>
    </el-dialog>
  </div>
</template>
  
  
  <script>
import {
  bulletMsgList,
  saveOrUpdate,
  deleteById,
  reportBullet,
} from "@/api/business/bulletMsg";
import { all } from "@/api/system/bulletMsgSensitive";
import { getToken } from "@/utils/auth";
export default {
  name: "user",
  data() {
    return {
      dialogTitle: "",
      dialogFormVisible: false,
      editForm: {},
      serachForm: {
        keyword: "",
        beginDate: "",
        endDate: "",
        currentPage: 1,
        pageSize: 3,
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" },
        ],
        age: [
          { required: true, message: "年龄不能为空！", trigger: "blur" },
          { type: "number", message: "请输入数字！" },
        ],
        salary: [{ required: true, message: "请输入薪资", trigger: "blur" }],
      },
      tableData: [],
      total: 0,
      defaultAvatar:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      sensitiveMsgData: [],
      showClickIcon: false,
      showInfo: false,
      rowid: "",
      rowData: [],
      checkedReportTags: [],
      reportTags: [
        "色情低俗",
        "政治铭感",
        "违法",
        "广告",
        "欺诈骗钱",
        "侵犯未成年人权益",
        "其他",
      ],
      reportTitle: "",
      reportMsg: "",
      reportForm: {
        cid: null,
        aid: null,
        reportInfo: "",
        reportDes: "",
        token: getToken(),
      },
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 3 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
    handleSubmit() {
      this.serachForm.currentPage = 1;
      this.fetchData(this.serachForm);
    },
    handleEditForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          saveOrUpdate(this.editForm).then((res) => {
            this.fetchData(this.serachForm);
            this.$message.success("操作成功！");
            this.dialogFormVisible = false;
          });
        } else {
          this.$message.error("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(pageSize) {
      this.serachForm.pageSize = pageSize;
      this.fetchData(this.serachForm);
    },
    handleCurrentChange(currentPage) {
      this.serachForm.currentPage = currentPage;
      this.fetchData(this.serachForm);
    },
    handleEdit(data) {
      this.dialogFormVisible = true;
      this.dialogTitle = "编辑用户";
      this.editForm = data;
    },
    handleSave() {
      this.dialogFormVisible = true;
      this.dialogTitle = "新增用户";
      this.editForm = {};
    },
    fetchData(params) {
      bulletMsgList(params).then((res) => {
        const { data } = res;
        this.serachForm.currentPage = data.currentPage;
        this.serachForm.pageSize = data.pageSize;
        this.tableData = data.data;
        this.total = data.totalCount;
      });
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除这一条记录, 确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteById(id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    ncrFormat(row) {
      this.showClickIcon = true;
      this.rowid = row.id; //赋值行id，便于页面判断
      this.rowData = row; //把行数据赋值，用于后续操作
    },
    showReportInfo(row) {
      this.reportTitle = `举报内容：\n \n${row.content}`;
      this.showInfo = true;
      this.checkedReportTags = [];
      this.reportMsg = "";
      this.reportForm = {
        cid: row.id,
        aid: row.authorId,
        reportInfo: "",
        reportDes: "",
        token: getToken(),
      };
      // this.reportForm.id = row.id;
    },
    checkRepoertMsgLength() {
      if (this.reportMsg.length > 30) {
        this.$confirm("举报内容不能超过30个字", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          showClose: false,
        }).then(() => {
          this.reportMsg = "";
        });
      } else {
        this.reportForm.reportDes = this.reportMsg;
      }
    },
    handleReport() {
      if (this.checkedReportTags.length <= 0) {
        this.$confirm("举报分类至少选择一项", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          showClose: false,
        }).then(() => {});
      } else {
        let str = "";
        this.checkedReportTags.forEach((report) => {
          str += report + ";";
        });
        this.reportForm.reportInfo = str;
        this.checkRepoertMsgLength();
        this.reportForm.reportDes = this.reportMsg;

        // 发送举报的请求
        reportBullet(this.reportForm).then((res) => {
          this.showInfo = false;
          this.$message.success("举报成功！");
          this.$router.push("/business/reportTable");
        });
      }
    },
  },
  filters: {
    sensitiveMsgFilter(content, sensitiveMsgData) {
      let str = content;
      sensitiveMsgData.forEach((sensitiveMsg) => {
        str = str.replaceAll(sensitiveMsg, "**");
      });
      return str;
    },
  },
  created() {
    this.fetchData();
    all().then((res) => {
      res.data.forEach((item) => {
        this.sensitiveMsgData.push(item.sensitiveMsg);
      });
    });
  },
};
</script>
  
  <style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-col {
  text-align: center;
}

.el-pagination {
  text-align: right;
}

.el-badge {
  line-height: 30px;
}

.el-badge__content.is-fixed {
  top: 10px !important;
}
</style>